﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three Demo</title>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="./js/common-v1.0.js" charset="utf-8"></script>
    <style type="text/css">

    </style>
</head>

<body>
    <div>
        <ul>
            <li>
                <a onclick="unfoldAndFoldUl('demo1ul')">
                    快速入门
                </a>
                <p>
                    笔记
                </p>
                <ul id="demo1ul">
                    <li>
                        <a href="./example/demo1/index1.html">
                            第一个3D场景
                        </a>
                    </li>
                    <li>
                        <a>
                            旋转动画、requestAnimationFrame周期性渲染
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo1/index2-1.html">
                                    setInterval()周期性调用render方法
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo1/index2-2.html">
                                    立方体旋转动画
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo1/index2-3.html">
                                    requestAnimationFrame两帧渲染时间间隔
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo1/index2-4.html">
                                    增加两帧之间计算资源
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            鼠标操作三维场景旋转缩放
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo1/index3-1.html">
                                    鼠标操作三维场景旋转缩放
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo1/index3-2.html">
                                    requestAnimationFrame周期性渲染
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo1/index3-3.html">
                                    框架1
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo1/index3-4.html">
                                    框架2
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            场景插入新的几何体
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo1/index4-1.html">
                                    立方体、球体、圆柱、正多面体
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo1/index4-2.html">
                                    插入多个几何体并偏移
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            设置材质效果
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo1/index5-1.html">
                                    创建材质对象
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo1/index5-2.html">
                                    半透明效果
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            光照效果设置
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo1/index6-1.html">
                                    光源对象创建
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo1/index6-2.html">
                                    点光源位置设置
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a onclick="unfoldAndFoldUl('demo2ul')">
                    顶点概念、几何体结构
                </a>
                <p>
                    笔记
                </p>
                <ul id="demo2ul">
                    <li>
                        <a href="./example/demo2/index1.html">
                            顶点位置数据解析渲染
                        </a>
                    </li>
                    <li>
                        <a>
                            顶点颜色数据插值计算
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo2/index2-1.html">
                                    每个顶点显示一种颜色
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo2/index2-2.html">
                                    彩色线条
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo2/index2-3.html">
                                    彩色三角面
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="./example/demo2/index3.html">
                            顶点法向量数据光照计算
                        </a>
                    </li>
                    <li>
                        <a>
                            顶点索引复用顶点数据
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo2/index4-1.html">
                                    矩形非索引绘制
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo2/index4-2.html">
                                    矩形索引绘制
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            设置Geometry顶点位置、顶点颜色数据
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo2/index5-1.html">
                                    Vector3定义顶点数据
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo2/index5-2.html">
                                    定义顶点颜色数据
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            Face3对象定义Geometry的三角面
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo2/index6-1.html">
                                    设置Face3顶点索引、法向量
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo2/index6-2.html">
                                    Face3颜色和geometry的colors属性
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            访问几何体对象的数据
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo2/index7-1.html">
                                    访问几何体对象的数据
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo2/index7-2.html">
                                    设置立方体顶点颜色
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo2/index7-3.html">
                                    删除立方体一个面
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="./example/demo2/index8.html">
                            旋转平移缩放变换、复制、克隆
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a onclick="unfoldAndFoldUl('demo3ul')">
                    材质对象
                </a>
                <p>
                    笔记
                </p>
                <ul id="demo3ul">
                    <li>
                        <a>
                            常用材质介绍
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo3/index1-1.html">
                                    点材质
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo3/index1-2.html">
                                    网格材质
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo3/index1-3.html">
                                    线材质
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="./example/demo3/index2.html">
                            材质属性
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a onclick="unfoldAndFoldUl('demo4ul')">
                    点线面模型对象
                </a>
                <p>
                    笔记
                </p>
                <ul id="demo4ul">
                    <li>
                        <a>
                            点、线、面模型介绍
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo4/index1-1.html">
                                    点模型
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo4/index1-2.html">
                                    线模型
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo4/index1-3.html">
                                    网格模型
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="./example/demo3/index2.html">
                            材质属性
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a onclick="unfoldAndFoldUl('demo5ul')">
                    光照对象
                </a>
                <p>
                    笔记
                </p>
                <ul id="demo5ul">
                    <li>
                        <a>
                            光照原理和常见光源类型
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo5/index1-1.html">
                                    环境光、点光源
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo5/index1-2.html">
                                    聚光光源、方向光
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo5/index1-3.html">
                                    聚光光源、方向光target属性
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            光照阴影
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo5/index2-1.html">
                                    平行光阴影
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo5/index2-2.html">
                                    聚光光源阴影
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            基类Light和Object3D
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo5/index3-1.html">
                                    光照强度设置
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a onclick="unfoldAndFoldUl('demo6ul')">
                    层级模型、树结构
                </a>
                <p>
                    笔记
                </p>
                <ul id="demo6ul">
                    <li>
                        <a href="./example/demo6/index1.html">
                            组对象Group、层级模型
                        </a>
                    </li>
                    <li>
                        <a href="./example/demo6/index2.html">
                            对象节点命名、查找、遍历
                        </a>
                    </li>
                    <li>
                        <a href="./example/demo6/index3.html">
                            本地位置坐标、世界位置坐标
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a onclick="unfoldAndFoldUl('demo7ul')">
                    几何体对象、曲线、三维建模
                </a>
                <p>
                    笔记
                </p>
                <ul id="demo7ul">
                    <li>
                        <a>
                            圆弧线绘制(直线、椭圆、圆弧)、基类Curve
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo7/index1-1.html">
                                    ArcCurve绘制圆弧
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index1-2.html">
                                    手动生成圆弧顶点
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index1-3.html">
                                    直线
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            样条曲线、贝赛尔曲线
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo7/index2-1.html">
                                    CatmullRomCurve3
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index2-2.html">
                                    CubicBezierCurve3（三维三次贝塞尔曲线）
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index2-3.html">
                                    QuadraticBezierCurve3（三维二次贝塞尔曲线）
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            多个线条组合曲线CurvePath
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo7/index3-1.html">
                                    组合曲线CurvePath
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            曲线路径管道成型TubeGeometry
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo7/index4-1.html">
                                    曲线Curve创建路径
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index4-2.html">
                                    CurvePath多段路径生成管道
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            旋转成型LatheGeometry
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo7/index5-1.html">
                                    旋转成型
                                </a>
                                <p>
                                    通过3个以上二维点（两条以上线段），形成的一个二维面，之后通过旋转方式，生成一个旋转轮廓。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo7/index5-2.html">
                                    样条曲线插值计算生成旋转轮廓
                                </a>
                                <p>相比于直接使用3个以上Vector2创建的旋转轮廓，通过先生成二维样条曲线SplineCurve，然后再通过分段来获取顶点，最后通过得到的顶点生成旋转轮廓，这样可以得到一个曲线的旋转轮廓，（前一种由于点之间距离很长，视觉上就是直线，不够美观。）
                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            Shape对象和轮廓填充ShapeGeometry
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo7/index6-1.html">
                                    填充顶点构成的轮廓
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index6-2.html">
                                    shape外轮廓内轮廓
                                </a>
                                <p>使用Shape创建形状，并使用arc方法设置形状参数，以实现基本的外轮廓；使用Path创建路径的方式，绘制出内轮廓；将内轮廓的Path对象插入到shape.holes（外轮廓）中。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo7/index6-3.html">
                                    多个轮廓同时填充
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index6-4.html">
                                    河南地图顶点轮廓填充
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            拉伸扫描成型ExtrudeGeometry
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo7/index7-1.html">
                                    拉伸
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index7-2.html">
                                    扫描
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index7-3.html">
                                    拉伸内外轮廓绘制
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo7/index7-4.html">
                                    多个shape
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a onclick="unfoldAndFoldUl('demo8ul')">
                    纹理贴图
                </a>
                <p>
                    笔记
                </p>
                <ul id="demo8ul">
                    <li>
                        <a>
                            创建纹理贴图
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo8/index1-1.html">
                                    创建纹理贴图
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index1-2.html">
                                    ImageLoader和Texture
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            UV映射原理(顶点纹理坐标)
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo8/index2-1.html">
                                    重置几何体纹理坐标
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index2-2.html">
                                    Geometry创建三角面设置UV坐标
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index2-3.html">
                                    BufferGeometry设置纹理坐标uv
                                </a>
                                <p>
                                    该类是一个 几何模型(Geometry) 的高效替代，因为它使用缓存（buffer）来保存所有数据，包括顶点位置、面索引、法向量、颜色、UVs以及自定义属性。
                                    这节约了向GPU传递全部这些数据的成本。但同时也使得BufferGeometry要比 几何模型(Geometry)
                                    更难以处理，不是以对象的方式来访问，比如使用Vector3来访问位置数据， 以Color对象来访问颜色数据，你得从相应的attribute缓存中访问原始数据。
                                    这使得BufferGeometry很适合用来存储静态对象，也就是当我们创建完模型实例后不太需要去操作它。
                                    <br>
                                    WebGL 把和每个顶点模型关联的数据保存在 属性（attributes） 中。 比如顶点位置、顶点法向量、顶点颜色等。当使用 几何模型(Geometry)
                                    时，renderer 负责封装这些信息到有类型数组缓存中并发送该数据到着色器。 当使用BufferGeometry时，所有这些和独立属性关联的数据都被保存进缓存中。
                                    举例来说，这意味着为了获取一个顶点的关联位置数据，你必须调用 .getAttribute 来访问 'position'
                                    attribute，然后可以访问该位置属性的x/y/z坐标值。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo8/index2-4.html">
                                    加载包含uv的外部模型
                                </a>
                                <p>
                                    ObjectLoader：用于加载JSON资源的加载器。和 JSON加载器(JSONLoader)不同，这个加载器使用对象的 .type 属性来映射到它们的原有类。
                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            数组材质、材质索引materialIndex
                        </a>
                        <p>
                            材质索引materialIndex相关总结
                            <ul>
                                <li>
                                    Geometry
                                    <ul>
                                        <li>三角面Face3
                                            <ul>
                                                <li>材质materialIndex属性</li>
                                                <li>材质索引materialIndex</li>
                                                <li>一个几何体对象的不同三角面Face3可以通过材质索引设置不同材质</li>
                                            </ul>
                                        </li>
                                        <li>threejs立方体、球体等几何体API都有默认的材质索引设置materialIndex</li>
                                        <li>BoxGeometry
                                            <ul>
                                                <li>默认每一个面包含的Face3对应一个材质对象</li>
                                                <li>纹理贴图
                                                    <p>每一个面都采集整张纹理贴图</p>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>默认数组材质需要材质对象元素数量
                                            <ul>
                                                <li>球体、平面：1</li>
                                                <li>圆柱体：3</li>
                                                <li>立方体：6</li>
                                            </ul>
                                        </li>
                                        <li>所谓数组材质
                                            <p>就是threejs几何体API的算法自动设置系列Face3的材质索引属性materialIndex</p>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    BufferGeometry
                                    <p>Groups属性</p>
                                    <ul>
                                        <li>.groups：Array</li>
                                        <li>元素
                                            <ul>
                                                <li>{start: Integer, count: Integer,materialIndex: Integer}</li>
                                                <li>材质索性materialIndex</li>
                                                <li>材质count对应顶点数量</li>
                                                <li>start对应第几个顶点的下标</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>材质索引作用
                                    <ul>
                                        <li>一个几何体对象不同三角形可以对应不同材质</li>
                                        <li>或者说一个网格模型可以具有多个材质对象</li>
                                    </ul>
                                </li>
                            </ul>
                        </p>
                        <ul>
                            <li>
                                <a href="./example/demo8/index3-1.html">
                                    数组材质
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index3-2.html">
                                    自定义Face3的材质索引
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index3-3.html">
                                    几何体平面局部设置纹理贴图
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            纹理对象Texture(阵列、偏移、旋转...)
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo8/index4-1.html">
                                    阵列设置重复纹理
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index4-2.html">
                                    纹理偏移
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index4-3.html">
                                    纹理旋转
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index4-4.html">
                                    草地效果
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index4-5.html">
                                    纹理移动动画效果
                                </a>
                                <p>设置贴图平铺，并在render()渲染时，设置偏移texture.offset，达到移动效果。需要注意的是，必须调用浏览器的requestAnimationFrame间隔时间render()渲染。
                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            canvas画布、视频作为纹理贴图
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo8/index5-1.html">
                                    canvas代码
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index5-2.html">
                                    canvas画布作为纹理贴图
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index5-3.html">
                                    视频作为纹理贴图
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            凹凸贴图、法线贴图(压缩模型)
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo8/index6-1.html">
                                    法线贴图
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index6-2.html">
                                    凹凸贴图
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index6-3.html">
                                    法向量——地球案例
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index6-4.html">
                                    法向量——枪案例
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            光照贴图添加阴影
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo8/index7-1.html">
                                    阴影贴图
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index7-2.html">
                                    光照阴影实时计算
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            高光贴图
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo8/index8-1.html">
                                    高光贴图
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo8/index8-2.html">
                                    地球高光贴图案例
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            环境贴图
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo8/index9-1.html">
                                    环境贴图
                                </a>
                                <p>
                                    使用CubeTextureLoader载入贴图
                                    <br>
                                    使用网孔材质MeshPhongMaterial定义材质，并将载入的贴图设置给envMap
                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            数据纹理对象DataTexture
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo8/index10-1.html">
                                    DataTexture (直接从原始数据和宽高来创建纹理。)
                                </a>
                                <p>
                                    DataTexture( data, width, height, format, type, mapping, wrapS, wrapT, magFilter,
                                    minFilter, anisotropy )<br>
                                    data参数必须是一个ArrayBuffer或者类型数组。 其它参数继承自基类 纹理(Texture), magFilter 和 minFilter 都默认设置为
                                    THREE.NearestFilter。flipY 和 generateMipmaps 属性默认设置为false。<br>
                                    数据的解析取决于类型（type参数）和格式（format参数）: 如果type为THREE.UnsignedByteType,
                                    那么就使用Uint8Array来获取纹理单元。 如果format为THREE.RGBAFormat, 那么data里面每4个值代表一个纹理单元（texel）; Red,
                                    Green, Blue 和 Alpha (透明度)。类似的，THREE.RGBFormat 指定用3个值来表示一个纹理单元。<br>
                                    对于包装的类型，THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type 或者
                                    THREE.UnsignedShort565Type，一个纹理单元的所有颜色分量可以通过在一个Uint16Array整数元素里的位域来获取。<br>
                                    要使用类型 THREE.FloatType 和 THREE.HalfFloatType, WebGL 的实现必须分别支持扩展 OES_texture_float 和
                                    OES_texture_half_float。要对这些类型的双线性插值使用THREE.LinearFilter，必须有WebGL扩展
                                    OES_texture_float_linear 和 OES_texture_half_float_linear 的支持。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo8/index10-2.html">
                                    创建RGBA数据
                                </a>
                                <p>
                                    在设置材质时必须将MeshPhongMaterial的transparent属性设置为ture，允许透明，否则贴图的RGBA中的A的值会无效。
                                </p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a>
                    相机对象(投影方式)
                </a>
                <a href="https://blog.csdn.net/u014291990/article/details/103340453">正投影相机和透视投影相机解释</a>
                <ul>
                    <li>
                        <a href="./example/demo9/index1-1.html">
                            正投影相机(OrthographicCamera)：角度不同投影长度不同
                        </a>
                        <p>
                            OrthographicCamera( left, right, top, bottom, near, far ) <br>
                            left — 相机视椎体（Camera frustum）左面。 <br>
                            right — 相机视椎体（Camera frustum）右面。 <br>
                            top — 相机视椎体（Camera frustum）上面。 <br>
                            bottom — 相机视椎体（Camera frustum）下面。 <br>
                            near — 相机视椎体（Camera frustum）前面（靠近相机的这一面）。 <br>
                            far — 相机视椎体（Camera frustum）后面（远离相机的这一面）。
                        </p>
                        <p>
                            .setViewOffset ( fullWidth, fullHeight, x, y, width, height ) <br>
                            fullWidth — 多视图设置的全宽 <br>
                            fullHeight — 多视图设置的全高 <br>
                            x — 副摄像头的水平偏移 <br>
                            y — 副摄像头的垂直偏移 <br>
                            width — 副摄像头宽度 <br>
                            height — 副摄像头高度 <br>
                            该方法用于在一个较大的视椎体中设置视图偏移。这对于多窗口或多监视器/多机设置是有用的。关于如何使用它，你可以查看 远景相机(PerspectiveCamera) 中的示例。 <br>
                            <br>
                            clearViewOffset () <br>
                            清除视图偏移。 <br>
                            <br>
                            updateProjectionMatrix () <br>
                            更新相机投影矩阵，必须在参数发生变化后调用。
                        </p>
                    </li>
                    <li>
                        <a href="./example/demo9/index2-1.html">
                            透视投影相机(远景相机)PerspectiveCamera：位置不同投影长度不同
                        </a>
                        <p>
                            进行远景投影的相机。
                            远景投影，也称之为透视投影。这个是我们人眼观察世界的模式，
                        </p>
                        <p>
                            PerspectiveCamera( fov, aspect, near, far ) <br>
                            fov — 相机视锥体垂直视角 <br>
                            aspect — 相机视锥体宽高比 <br>
                            near — 相机视锥体近裁剪面 <br>
                            far — 相机视锥体远裁剪面。
                        </p>
                        <p>
                            属性（Properties） <br>
                            #.fov：相机视锥体垂直视角，从下到上的观察角度。 <br>
                            #.zoom：获取或设置相机缩放因子（zoom factor）。 <br>
                            #.near：相机视锥体近裁剪面。 <br>
                            #.far：相机视锥体远裁剪面。 <br>
                            #.focus：焦点，用于立体视觉和场深度效果的目标距离。这个参数不影响投影矩阵，除非是使用立体摄影机。这个参数不影响投影矩阵，除非是使用立体摄影机。 <br>
                            #.aspect：相机视锥体宽高比，等于窗口宽度除以窗口高度。 <br>
                            #.view：视椎体窗口规格或null。 <br>
                            #.filmGauge：用于较大坐标轴的胶片尺寸。默认为35（毫米）。这个参数不影响投影矩阵，除非.filmOffset设置为非零值。 <br>
                            #.filmOffset：水平偏离中心偏移量，和.filmGauge同单位。
                        </p>
                    </li>
                </ul>
            </li>
            <li>
                <a>
                    点精灵、粒子系统
                </a>
                <ul>
                    <li>
                        <a>
                            精灵模型对象Sprite
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo10/index1-1.html">
                                    精灵模型对象（需要使用精灵材质SpriteMaterial）
                                </a>
                                <p>
                                    精灵平面（Sprite）是一个在3D场景中总是面对着相机的平面。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index1-2.html">
                                    透视投影相机
                                </a>
                                <p>
                                    由远到近的精灵展示效果，使用sprite.position.set设置面精灵位置
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index1-3.html">
                                    点模型
                                </a>
                                <p>
                                    以可变大小的点形式来显示粒子的类。比如，如果使用 WebGL渲染器(WebGLRenderer)，粒子将使用 GL_POINTS 来显示。 <br>
                                </p>
                                <p>
                                    Points( geometry, material ) <br>
                                    geometry — 几何模型(Geometry) 的一个实例。一个几何模型(Geometry) 实例，其中每个顶点指定系统中的一个粒子的位置。 <br>
                                    material — 材料(Material) 的一个实例(可选)。一个 材料(Material) 实力， 定义对象的外观。默认的是随机色彩的
                                    点材料(PointsMaterial)。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index1-launcher.html">
                                    粒子发射器
                                </a>
                                <p>
                                    结合补间动画Tweenjs库、requestAnimationFrame()函数，在每一次渲染的时候，创建一个随机的Sprite精灵，执行动画，让精灵在y轴上变换位置，动画时间6秒。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index1-tween.html">
                                    使用tween动画
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo10/index1-4.html">
                                    网格模型
                                </a>
                                <p>
                                    使用材质：三角面(网格)渲染模式 MeshLambertMaterial MeshBasicMaterial <br>
                                    模型：网格模型对象Mesh
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index1-5.html">
                                    线模型
                                </a>
                                <p>
                                    使用材质LineBasicMaterial，创建线模型对象Line 构造函数：Line、LineLoop、LineSegments
                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            中国城市PM2.5可视化案例
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo10/index2-1.html">
                                    点精灵实现
                                </a>
                                <p>
                                    使用TextureLoader载入贴图<br>
                                    使用Group来包含所有精灵对象<br>
                                    使用FileLoader来加载json数据<br>
                                    使用SpriteMaterial材质创建Sprite对象，并将精灵对象加入group组<br>
                                    通过sprite.scale及pm值适当缩放精灵大小，得到更好的效果<br>
                                    获得城市坐标设置精灵模型对象的位置sprite.position.set(x,y,0)<br>
                                    中国城市坐标整体的几何中心不在坐标原点，需要适当的平移，通过group.position.set对精灵组进行平移
                                    使用scene.add(group)把精灵群组插入场景中<br>
                                    需要注意的地方：我们需要调整相机的位置，以便沿着z轴进行观察，才能达到正常的可视效果。camera.position.set(0, 0, 200)<br>
                                    可以通过设置OrbitControls的enableRotate的值为false来禁止旋转操作。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index2-2.html">
                                    points模型只能表示位置
                                </a>
                                <p>
                                    材质：PointsMaterial
                                    使用Vector3表示一个城市坐标，并push到geometry.vertices中<br>
                                    创建一个Points来表示一个pm圆点
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index2-3.html">
                                    points模型只能表示位置2(代码纠正)
                                </a>
                                <p>
                                    将固定参数到对象移到循环之外
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index2-4.html">
                                    CircleGeometry实现
                                </a>
                            </li>
                            <li>
                                <a href="./example/demo10/index2-5.html">
                                    PlaneGeometry表示
                                </a>
                                <p>
                                    PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments
                                    : Integer)<br>
                                    width — 平面沿着X轴的宽度。默认值是1。<br>
                                    height — 平面沿着Y轴的高度。默认值是1。<br>
                                    widthSegments — （可选）平面的宽度分段数，默认值是1。<br>
                                    heightSegments — （可选）平面的高度分段数，默认值是1。
                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="./example/demo10/index3-1.html">
                            树林效果
                        </a>
                        <p>
                            使用PlaneGeometry矩形平面制作草地<br>
                            //设置纹理的重复模式
                            texture.wrapS = THREE.RepeatWrapping;
                            texture.wrapT = THREE.RepeatWrapping;<br>
                            通过设置贴图的repeat，使图片在x,y轴方向重复<br>
                            创建位置随机的精灵Sprite，贴图为树木。
                        </p>
                    </li>
                    <li>
                        <a>
                            下雨场景效果模拟
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo10/index4-1.html">
                                    空间中随机生成静态的雨滴
                                </a>
                                <p>
                                    生成随机位置的雨滴精灵Sprite
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index4-2.html">
                                    雨滴动态运动
                                </a>
                                <p>
                                    // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms<br>
                                    // 每次渲染都会更新雨滴的位置，进而产生动画效果
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index4-3.html">
                                    站在雨中效果
                                </a>
                                <p>
                                    // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms<br>
                                    // 每次渲染都会更新雨滴的位置，进而产生动画效果
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo10/index4-4.html">
                                    匀速下落
                                </a>
                                <p>
                                    使用Clock的getDelta方法得到两次渲染的时间间隔，根据这个时间间隔来设雨滴y坐标的变化（50 * t）
                                </p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a>
                    帧动画模块
                </a>
                <p>
                    笔记
                </p>
                <ul>
                    <li>
                        <a href="./example/demo11/index1-1.html">
                            编辑关键帧并解析播放
                        </a>
                        <p>
                            KeyframeTrack：关键帧轨道(KeyframeTrack)是关键帧(keyframes)的定时序列, 它由时间和相关值的列表组成,
                            用来让一个对象的某个特定属性动起来。<br>
                            关键帧轨道(KeyframeTrack)中总是存在两个数组：times数组按顺序存储该轨道的所有关键帧的时间值，而values数组包含动画属性的相应更改值。<br>
                            - 构造器<br>
                            - KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant
                            )<br>
                            - name - 关键帧轨道(KeyframeTrack)的标识符.<br>
                            - times - 关键帧的时间数组, 被内部转化为 Float32Array.<br>
                            - values - 与时间数组中的时间点相关的值组成的数组, 被内部转化为 Float32Array.<br>
                            - interpolation - 使用的插值类型。 参见 Animation Constants for possible values. Default
                            isInterpolateLinear.<br>
                            ------------<br>
                            AnimationClip：动画剪辑（AnimationClip）是一个可重用的关键帧轨道集，它代表动画。

                            构造器<br>
                            AnimationClip( name : String, duration : Number, tracks : Array )<br>
                            name - 此剪辑的名称<br>
                            duration - 持续时间 (单位秒). 如果传入负数, 持续时间将会从传入的数组中计算得到。<br>
                            tracks - 一个由关键帧轨道（KeyframeTracks）组成的数组。<br>

                            说明: 与其直接调用构造函数实例化一个动画剪辑, 不如使用其静态方法中的一个来创建： 用JSON (parse),
                            用变形目标序列(CreateFromMorphTargetSequence, CreateClipsFromMorphTargetSequences)或者用动画层级
                            (parseAnimation)来创建 - 如果你的模型中几何体的动画数组中还没有保存动画剪辑的话。<br>
                            -------------------<br>
                            AnimationMixer：动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。<br>
                            构造器<br>
                            AnimationMixer( rootObject : Object3D )<br>
                            rootObject - 混合器播放的动画所属的对象，可传入group对象组<br>
                            方法：<br>
                            .clipAction (clip : AnimationClip, optionalRoot : Object3D) : AnimationAction
                            返回所传入的剪辑参数的AnimationAction,
                            根对象参数可选，默认值为混合器的默认根对象。第一个参数可以是动画剪辑(AnimationClip)对象或者动画剪辑的名称。<br>

                            如果不存在符合传入的剪辑和根对象这两个参数的动作, 该方法将会创建一个。传入相同的参数多次调用将会返回同一个剪辑实例。<br>
                            ------<br>
                            在render()中更新混合器时间<br>
                            //clock.getDelta()方法获得两帧的时间间隔<br>
                            // 更新混合器相关的时间
                            -------------------<br>
                            AnimationAction：AnimationActions 用来调度存储在AnimationClips中的动画。<br>
                            说明: AnimationAction的大多数方法都可以链式调用<br>
                            构造器<br>
                            AnimationAction( mixer : AnimationMixer, clip : AnimationClip, localRoot : Object3D )<br>
                            mixer - 被此动作控制的 *动画混合器*<br>
                            clip - *动画剪辑* 保存了此动作当中的动画数据<br>
                            localRoot - 动作执行的根对象<br>
                            说明: 不要直接调用这个构造函数，而应该先用AnimationMixer.clipAction实例化一个AnimationAction，因为这个方法提供了缓存以提高性能。
                        </p>
                    </li>
                    <li>
                        <a href="./example/demo11/index2-1.html">
                            解析模型包含的帧动画
                        </a>
                        <p>
                            使用ObjectLoader的load加载外部模型<br>
                        </p>
                    </li>
                    <li>
                        <a>
                            编辑关键帧并解析播放
                        </a>
                        <p>

                        </p>
                        <ul>
                            <li>
                                <a href="./example/demo11/index3-1.html">
                                    暂停继续
                                </a>
                                <p>
                                    通过控制AnimationAction.paused的值来操作暂停/播放。paused置为true会通过将动作的有效时间比例改为0来使动作暂停执行。默认值是false
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo11/index3-2.html">
                                    播放clip的特定时间段
                                </a>
                                <p>
                                    // 设置播放区间10~18 关键帧数据总时间是20<br>
                                    AnimationAction.time = 10; //操作对象设置开始播放时间<br>
                                    clip.duration = 18; //剪辑对象设置播放结束时间。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo11/index3-3.html">
                                    定位在某个时间点
                                </a>
                                <p>
                                    // 开始结束时间设置为一样，相当于播放时间为0，直接跳转到时间点对应的状态<br>
                                    AnimationAction.time = 10; //操作对象设置开始播放时间<br>
                                    clip.duration = AnimationAction.time; //剪辑对象设置播放结束时间。剪辑的持续时间 (单位秒).
                                    可以通过resetDuration从轨道数组（tracks）计算出来。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo11/index3-4.html">
                                    按钮设置时间点
                                </a>
                                <p>
                                    动态设置AnimationAction.time和clip.duration的值。
                                </p>
                            </li>
                            <li>
                                <a href="./example/demo11/index3-5.html">
                                    滚动条拖动
                                </a>
                                <p>
                                    使用监听属性watch来监听滚动条值的变化，从而动态设置AnimationAction.time和clip.duration的值。
                                </p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a>
                    骨骼动画、变形动画
                </a>
                <ul>
                    <li>
                        <a>
                            骨骼动画原理
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo12/index1-1.html">
                                    手动创建一个骨骼网格模型
                                </a>
                                <p>

                                </p>
                            </li>
                            <li>
                                <a href="./example/demo12/index1-2.html">
                                    骨骼网格模型设置动画
                                </a>
                                <p>

                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            加载外部模型骨骼动画
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo12/index2-1.html">
                                    查看骨骼数据
                                </a>
                                <p>

                                </p>
                            </li>
                            <li>
                                <a href="./example/demo12/index2-2.html">
                                    解析骨骼的帧动画数据
                                </a>
                                <p>

                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            变形目标动画原理
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo12/index3-1.html">
                                    创建一组变形目标数据
                                </a>
                                <p>

                                </p>
                            </li>
                            <li>
                                <a href="./example/demo12/index3-2.html">
                                    使用帧动画模块编辑播放
                                </a>
                                <p>

                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>
                            解析外部模型变形目标数据
                        </a>
                        <ul>
                            <li>
                                <a href="./example/demo12/index4-1.html">
                                    解析变形目标数据
                                </a>
                                <p>

                                </p>
                            </li>
                            <li>
                                <a href="./example/demo12/index4-2.html">
                                    vue滑动条控制变形权重
                                </a>
                                <p>

                                </p>
                            </li>
                            <li>
                                <a href="./example/demo12/index4-1.html">
                                    解析播放帧动画
                                </a>
                                <p>

                                </p>
                            </li>
                            <li>
                                <a href="./example/demo12/index4-2.html">
                                    变形目标生成帧动画
                                </a>
                                <p>

                                </p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="./example/demo1/index.html">
                    语音模块
                </a>
                <p>
                    笔记
                </p>
            </li>
            <li>
                <a href="./example/demo1/index.html">
                    模型文件加载
                </a>
                <p>
                    笔记
                </p>
            </li>
            <li>
                <a href="./example/demo1/index.html">
                    WebGL渲染器
                </a>
                <p>
                    笔记
                </p>
            </li>
        </ul>
    </div>
</body>

</html>
<!-- <script>
    var catalogs = [{
            pageUrl: './example/demo1/index.html',
            title: '快速入门',
            note: '',
            subNode: [{
                    pageUrl: '',
                    title: '第一个3D场景',
                    note: ''
                },
                {
                    pageUrl: '',
                    title: '旋转动画、requestAnimationFrame周期性渲染',
                    note: ''
                },
                {
                    pageUrl: '',
                    title: '鼠标操作三维场景旋转缩放',
                    note: ''
                },
                {
                    pageUrl: '',
                    title: '场景插入新的几何体',
                    note: ''
                },
                {
                    pageUrl: '',
                    title: '设置材质效果',
                    note: ''
                },
                {
                    pageUrl: '',
                    title: '光照效果设置',
                    note: ''
                }
            ]
        },
        {
            pageUrl: '',
            title: '顶点概念、几何体结构',
            note: ''
        },
        {
            pageUrl: '',
            title: '材质对象',
            note: ''
        },
        {
            pageUrl: '',
            title: '点线面模型对象',
            note: ''
        },
        {
            pageUrl: '',
            title: '光照对象',
            note: ''
        },
        {
            pageUrl: '',
            title: '层级模型、树结构',
            note: ''
        },
        {
            pageUrl: '',
            title: '几何体对象、曲线、三维建模',
            note: ''
        },
        {
            pageUrl: '',
            title: '纹理贴图',
            note: ''
        },
        {
            pageUrl: '',
            title: '相机对象(投影方式)',
            note: ''
        },
        {
            pageUrl: '',
            title: '点精灵、粒子系统',
            note: ''
        },
        {
            pageUrl: '',
            title: '帧动画模块',
            note: ''
        },
        {
            pageUrl: '',
            title: '骨骼动画、变形动画',
            note: ''
        },
        {
            pageUrl: '',
            title: '语音模块',
            note: ''
        },
        {
            pageUrl: '',
            title: '模型文件加载',
            note: ''
        },
        {
            pageUrl: '',
            title: 'WebGL渲染器',
            note: ''
        }
    ]
    // var ulCatelog = document.getElementsByTagName("ul")[0]
    // var str = ''
    // catalogs.forEach(catalog => {
    //     if (catalog.subNode && catalog.subNode.length > 0) {

    //     } else {
    //         str += `<li>
    //         <a href="${ catalog.pageUrl }">
    //             ${ catalog.title }
    //         </a>
    //         <p>
    //             ${ catalog.note }
    //         </p>
    //     </li>`
    //     }
    // })
    // ulCatelog.innerHTML = str
    // console.log(ulCatelog)
</script> -->